mixin.less 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. @import '../../input/style/mixin';
  2. .form-control-validation(
  3. @text-color: @input-color;
  4. @border-color: @input-border-color;
  5. @background-color: @input-bg;
  6. @hoverBorderColor: @primary-color-hover;
  7. @outlineColor: @primary-color-outline;
  8. ) {
  9. .@{ant-prefix}-form-item-split {
  10. color: @text-color;
  11. }
  12. // 输入框的不同校验状态
  13. :not(.@{ant-prefix}-input-disabled):not(.@{ant-prefix}-input-borderless).@{ant-prefix}-input,
  14. :not(.@{ant-prefix}-input-affix-wrapper-disabled):not(.@{ant-prefix}-input-affix-wrapper-borderless).@{ant-prefix}-input-affix-wrapper,
  15. :not(.@{ant-prefix}-input-number-affix-wrapper-disabled):not(.@{ant-prefix}-input-number-affix-wrapper-borderless).@{ant-prefix}-input-number-affix-wrapper {
  16. &,
  17. &:hover {
  18. background-color: @background-color;
  19. border-color: @border-color;
  20. }
  21. &:focus,
  22. &-focused {
  23. .active(@border-color, @hoverBorderColor, @outlineColor);
  24. }
  25. }
  26. .@{ant-prefix}-calendar-picker-open .@{ant-prefix}-calendar-picker-input {
  27. .active(@border-color, @hoverBorderColor, @outlineColor);
  28. }
  29. .@{ant-prefix}-input-prefix,
  30. .@{ant-prefix}-input-number-prefix {
  31. color: @text-color;
  32. }
  33. :not(.@{ant-prefix}-input-group-addon-disabled).@{ant-prefix}-input-group-addon,
  34. :not(.@{ant-prefix}-input-number-group-addon-disabled).@{ant-prefix}-input-number-group-addon {
  35. color: @text-color;
  36. border-color: @border-color;
  37. }
  38. .has-feedback {
  39. color: @text-color;
  40. }
  41. }
  42. // Reset form styles
  43. // -----------------------------
  44. // Based on Bootstrap framework
  45. .reset-form() {
  46. legend {
  47. display: block;
  48. width: 100%;
  49. margin-bottom: 20px;
  50. padding: 0;
  51. color: @text-color-secondary;
  52. font-size: @font-size-lg;
  53. line-height: inherit;
  54. border: 0;
  55. border-bottom: @border-width-base @border-style-base @border-color-base;
  56. }
  57. label {
  58. font-size: @font-size-base;
  59. }
  60. input[type='search'] {
  61. box-sizing: border-box;
  62. }
  63. // Position radios and checkboxes better
  64. input[type='radio'],
  65. input[type='checkbox'] {
  66. line-height: normal;
  67. }
  68. input[type='file'] {
  69. display: block;
  70. }
  71. // Make range inputs behave like textual form controls
  72. input[type='range'] {
  73. display: block;
  74. width: 100%;
  75. }
  76. // Make multiple select elements height not fixed
  77. select[multiple],
  78. select[size] {
  79. height: auto;
  80. }
  81. // Focus for file, radio, and checkbox
  82. input[type='file']:focus,
  83. input[type='radio']:focus,
  84. input[type='checkbox']:focus {
  85. outline: thin dotted;
  86. outline: 5px auto -webkit-focus-ring-color;
  87. outline-offset: -2px;
  88. }
  89. // Adjust output element
  90. output {
  91. display: block;
  92. padding-top: 15px;
  93. color: @input-color;
  94. font-size: @font-size-base;
  95. line-height: @line-height-base;
  96. }
  97. }