forms.less 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  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. -webkit-appearance: none;
  28. -webkit-border-radius: 0px;
  29. background-position: right 50%;
  30. background-repeat: no-repeat;
  31. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
  32. }
  33. .form-group {
  34. &.has-success {
  35. label {
  36. color: @green;
  37. }
  38. .form-control,
  39. .input-group-addon {
  40. border-color: @green;
  41. box-shadow: none;
  42. }
  43. .help-block {
  44. color: @green;
  45. }
  46. }
  47. &.has-warning {
  48. label {
  49. color: @yellow;
  50. }
  51. .form-control,
  52. .input-group-addon {
  53. border-color: @yellow;
  54. box-shadow: none;
  55. }
  56. .help-block {
  57. color: @yellow;
  58. }
  59. }
  60. &.has-error {
  61. label {
  62. color: @red;
  63. }
  64. .form-control,
  65. .input-group-addon {
  66. border-color: @red;
  67. box-shadow: none;
  68. }
  69. .help-block {
  70. color: @red;
  71. }
  72. }
  73. }
  74. /* Input group */
  75. .input-group {
  76. .input-group-addon {
  77. .border-radius(@input-radius);
  78. border-color: @gray;
  79. background-color: #fff;
  80. }
  81. }
  82. /* button groups */
  83. .btn-group-vertical {
  84. .btn {
  85. &.btn-flat:first-of-type, &.btn-flat:last-of-type {
  86. .border-radius(0);
  87. }
  88. }
  89. }
  90. .icheck > label {
  91. padding-left: 0;
  92. }
  93. /* support Font Awesome icons in form-control */
  94. .form-control-feedback.fa {
  95. line-height: @input-height-base;
  96. }
  97. .input-lg + .form-control-feedback.fa,
  98. .input-group-lg + .form-control-feedback.fa,
  99. .form-group-lg .form-control + .form-control-feedback.fa {
  100. line-height: @input-height-large;
  101. }
  102. .input-sm + .form-control-feedback.fa,
  103. .input-group-sm + .form-control-feedback.fa,
  104. .form-group-sm .form-control + .form-control-feedback.fa {
  105. line-height: @input-height-small;
  106. }