vertical.less 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. @import (reference) '../../style/themes/index';
  2. @form-prefix-cls: ~'@{ant-prefix}-form';
  3. @form-item-prefix-cls: ~'@{form-prefix-cls}-item';
  4. // ================== Label ==================
  5. .make-vertical-layout-label() {
  6. & when (@form-vertical-label-margin > 0) {
  7. margin: @form-vertical-label-margin;
  8. }
  9. padding: @form-vertical-label-padding;
  10. line-height: @line-height-base;
  11. white-space: initial;
  12. text-align: left;
  13. > label {
  14. margin: 0;
  15. &::after {
  16. display: none;
  17. }
  18. }
  19. }
  20. .make-vertical-layout() {
  21. .@{form-prefix-cls}-item .@{form-prefix-cls}-item-label {
  22. .make-vertical-layout-label();
  23. }
  24. .@{form-prefix-cls} {
  25. .@{form-prefix-cls}-item {
  26. flex-wrap: wrap;
  27. .@{form-prefix-cls}-item-label,
  28. .@{form-prefix-cls}-item-control {
  29. flex: 0 0 100%;
  30. max-width: 100%;
  31. }
  32. }
  33. }
  34. }
  35. .@{form-prefix-cls}-vertical {
  36. .@{form-item-prefix-cls} {
  37. &-row {
  38. flex-direction: column;
  39. }
  40. &-label > label {
  41. height: auto;
  42. }
  43. .@{form-prefix-cls}-item-control {
  44. width: 100%;
  45. }
  46. }
  47. }
  48. .@{form-prefix-cls}-vertical .@{form-item-prefix-cls}-label,
  49. /* when labelCol is 24, it is a vertical form */
  50. .@{ant-prefix}-col-24.@{form-item-prefix-cls}-label,
  51. .@{ant-prefix}-col-xl-24.@{form-item-prefix-cls}-label {
  52. .make-vertical-layout-label();
  53. }
  54. @media (max-width: @screen-xs-max) {
  55. .make-vertical-layout();
  56. .@{ant-prefix}-col-xs-24.@{form-item-prefix-cls}-label {
  57. .make-vertical-layout-label();
  58. }
  59. }
  60. @media (max-width: @screen-sm-max) {
  61. .@{ant-prefix}-col-sm-24.@{form-item-prefix-cls}-label {
  62. .make-vertical-layout-label();
  63. }
  64. }
  65. @media (max-width: @screen-md-max) {
  66. .@{ant-prefix}-col-md-24.@{form-item-prefix-cls}-label {
  67. .make-vertical-layout-label();
  68. }
  69. }
  70. @media (max-width: @screen-lg-max) {
  71. .@{ant-prefix}-col-lg-24.@{form-item-prefix-cls}-label {
  72. .make-vertical-layout-label();
  73. }
  74. }
  75. @media (max-width: @screen-xl-max) {
  76. .@{ant-prefix}-col-xl-24.@{form-item-prefix-cls}-label {
  77. .make-vertical-layout-label();
  78. }
  79. }