index-pure.less 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. @import '../../style/themes/index';
  2. @import '../../style/mixins/index';
  3. @divider-prefix-cls: ~'@{ant-prefix}-divider';
  4. .@{divider-prefix-cls} {
  5. .reset-component();
  6. border-top: @border-width-base solid @divider-color;
  7. &-vertical {
  8. position: relative;
  9. top: -0.06em;
  10. display: inline-block;
  11. height: 0.9em;
  12. margin: 0 @divider-vertical-gutter;
  13. vertical-align: middle;
  14. border-top: 0;
  15. border-left: @border-width-base solid @divider-color;
  16. }
  17. &-horizontal {
  18. display: flex;
  19. clear: both;
  20. width: 100%;
  21. min-width: 100%; // Fix https://github.com/ant-design/ant-design/issues/10914
  22. margin: 24px 0;
  23. }
  24. &-horizontal&-with-text {
  25. display: flex;
  26. margin: 16px 0;
  27. color: @heading-color;
  28. font-weight: 500;
  29. font-size: @font-size-lg;
  30. white-space: nowrap;
  31. text-align: center;
  32. border-top: 0;
  33. border-top-color: @divider-color;
  34. &::before,
  35. &::after {
  36. position: relative;
  37. top: 50%;
  38. width: 50%;
  39. border-top: @border-width-base solid transparent;
  40. // Chrome not accept `inherit` in `border-top`
  41. border-top-color: inherit;
  42. border-bottom: 0;
  43. transform: translateY(50%);
  44. content: '';
  45. }
  46. }
  47. &-horizontal&-with-text-left {
  48. &::before {
  49. top: 50%;
  50. width: @divider-orientation-margin;
  51. }
  52. &::after {
  53. top: 50%;
  54. width: 100% - @divider-orientation-margin;
  55. }
  56. }
  57. &-horizontal&-with-text-right {
  58. &::before {
  59. top: 50%;
  60. width: 100% - @divider-orientation-margin;
  61. }
  62. &::after {
  63. top: 50%;
  64. width: @divider-orientation-margin;
  65. }
  66. }
  67. &-inner-text {
  68. display: inline-block;
  69. padding: 0 @divider-text-padding;
  70. }
  71. &-dashed {
  72. background: none;
  73. border-color: @divider-color;
  74. border-style: dashed;
  75. border-width: @border-width-base 0 0;
  76. }
  77. &-horizontal&-with-text&-dashed {
  78. &::before,
  79. &::after {
  80. border-style: dashed none none;
  81. }
  82. }
  83. &-vertical&-dashed {
  84. border-width: 0 0 0 @border-width-base;
  85. }
  86. &-plain&-with-text {
  87. color: @text-color;
  88. font-weight: normal;
  89. font-size: @font-size-base;
  90. }
  91. &-horizontal&-with-text-left&-no-default-orientation-margin-left {
  92. &::before {
  93. width: 0;
  94. }
  95. &::after {
  96. width: 100%;
  97. }
  98. .ant-divider-inner-text {
  99. padding-left: 0;
  100. }
  101. }
  102. &-horizontal&-with-text-right&-no-default-orientation-margin-right {
  103. &::before {
  104. width: 100%;
  105. }
  106. &::after {
  107. width: 0;
  108. }
  109. .ant-divider-inner-text {
  110. padding-right: 0;
  111. }
  112. }
  113. }
  114. @import './rtl';