index-pure.less 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. @import '../../style/themes/index';
  2. @import '../../style/mixins/index';
  3. @import './mixin';
  4. @row-prefix-cls: ~'@{ant-prefix}-row';
  5. @col-prefix-cls: ~'@{ant-prefix}-col';
  6. // Grid system
  7. .@{row-prefix-cls} {
  8. display: flex;
  9. flex-flow: row wrap;
  10. &::before,
  11. &::after {
  12. display: flex;
  13. }
  14. // No wrap of flex
  15. &-no-wrap {
  16. flex-wrap: nowrap;
  17. }
  18. }
  19. // x轴原点
  20. .@{row-prefix-cls}-start {
  21. justify-content: flex-start;
  22. }
  23. // x轴居中
  24. .@{row-prefix-cls}-center {
  25. justify-content: center;
  26. }
  27. // x轴反方向
  28. .@{row-prefix-cls}-end {
  29. justify-content: flex-end;
  30. }
  31. // x轴平分
  32. .@{row-prefix-cls}-space-between {
  33. justify-content: space-between;
  34. }
  35. // x轴有间隔地平分
  36. .@{row-prefix-cls}-space-around {
  37. justify-content: space-around;
  38. }
  39. // 顶部对齐
  40. .@{row-prefix-cls}-top {
  41. align-items: flex-start;
  42. }
  43. // 居中对齐
  44. .@{row-prefix-cls}-middle {
  45. align-items: center;
  46. }
  47. // 底部对齐
  48. .@{row-prefix-cls}-bottom {
  49. align-items: flex-end;
  50. }
  51. .@{col-prefix-cls} {
  52. position: relative;
  53. max-width: 100%;
  54. // Prevent columns from collapsing when empty
  55. min-height: 1px;
  56. }
  57. .make-grid();
  58. // Extra small grid
  59. //
  60. // Columns, offsets, pushes, and pulls for extra small devices like
  61. // smartphones.
  62. .make-grid(-xs);
  63. // Small grid
  64. //
  65. // Columns, offsets, pushes, and pulls for the small device range, from phones
  66. // to tablets.
  67. @media (min-width: @screen-sm-min) {
  68. .make-grid(-sm);
  69. }
  70. // Medium grid
  71. //
  72. // Columns, offsets, pushes, and pulls for the desktop device range.
  73. @media (min-width: @screen-md-min) {
  74. .make-grid(-md);
  75. }
  76. // Large grid
  77. //
  78. // Columns, offsets, pushes, and pulls for the large desktop device range.
  79. @media (min-width: @screen-lg-min) {
  80. .make-grid(-lg);
  81. }
  82. // Extra Large grid
  83. //
  84. // Columns, offsets, pushes, and pulls for the full hd device range.
  85. @media (min-width: @screen-xl-min) {
  86. .make-grid(-xl);
  87. }
  88. // Extra Extra Large grid
  89. //
  90. // Columns, offsets, pushes, and pulls for the full hd device range.
  91. @media (min-width: @screen-xxl-min) {
  92. .make-grid(-xxl);
  93. }
  94. @media (min-width: @screen-xxxl-min) {
  95. .make-grid(-xxxl);
  96. }
  97. @import './rtl';