index.less 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  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. align-items: center;
  27. margin: 16px 0;
  28. color: @heading-color;
  29. font-weight: 500;
  30. font-size: @font-size-lg;
  31. white-space: nowrap;
  32. text-align: center;
  33. border-top: 0;
  34. border-top-color: @divider-color;
  35. &::before,
  36. &::after {
  37. position: relative;
  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. width: @divider-orientation-margin;
  50. }
  51. &::after {
  52. width: 100% - @divider-orientation-margin;
  53. }
  54. }
  55. &-horizontal&-with-text-right {
  56. &::before {
  57. width: 100% - @divider-orientation-margin;
  58. }
  59. &::after {
  60. width: @divider-orientation-margin;
  61. }
  62. }
  63. &-inner-text {
  64. display: inline-block;
  65. padding: 0 @divider-text-padding;
  66. }
  67. &-dashed {
  68. background: none;
  69. border-color: @divider-color;
  70. border-style: dashed;
  71. border-width: @border-width-base 0 0;
  72. }
  73. &-horizontal&-with-text&-dashed {
  74. &::before,
  75. &::after {
  76. border-style: dashed none none;
  77. }
  78. }
  79. &-vertical&-dashed {
  80. border-width: 0 0 0 @border-width-base;
  81. }
  82. &-plain&-with-text {
  83. color: @text-color;
  84. font-weight: normal;
  85. font-size: @font-size-base;
  86. }
  87. &-horizontal&-with-text-left&-no-default-orientation-margin-left {
  88. &::before {
  89. width: 0;
  90. }
  91. &::after {
  92. width: 100%;
  93. }
  94. .@{divider-prefix-cls}-inner-text {
  95. padding-left: 0;
  96. }
  97. }
  98. &-horizontal&-with-text-right&-no-default-orientation-margin-right {
  99. &::before {
  100. width: 100%;
  101. }
  102. &::after {
  103. width: 0;
  104. }
  105. .@{divider-prefix-cls}-inner-text {
  106. padding-right: 0;
  107. }
  108. }
  109. }
  110. @import './rtl';