index.less 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. @import '../../style/themes/index';
  2. @import '../../style/mixins/index';
  3. @descriptions-prefix-cls: ~'@{ant-prefix}-descriptions';
  4. .@{descriptions-prefix-cls} {
  5. &-header {
  6. display: flex;
  7. align-items: center;
  8. margin-bottom: @descriptions-title-margin-bottom;
  9. }
  10. &-title {
  11. flex: auto;
  12. overflow: hidden;
  13. color: @heading-color;
  14. font-weight: bold;
  15. font-size: @font-size-lg;
  16. line-height: @line-height-base;
  17. white-space: nowrap;
  18. text-overflow: ellipsis;
  19. }
  20. &-extra {
  21. margin-left: auto;
  22. color: @descriptions-extra-color;
  23. font-size: @font-size-base;
  24. }
  25. &-view {
  26. width: 100%;
  27. border-radius: @border-radius-base;
  28. table {
  29. width: 100%;
  30. table-layout: fixed;
  31. }
  32. }
  33. &-row {
  34. > th,
  35. > td {
  36. padding-bottom: @descriptions-item-padding-bottom;
  37. }
  38. &:last-child {
  39. border-bottom: none;
  40. }
  41. }
  42. &-item-label {
  43. color: @heading-color;
  44. font-weight: normal;
  45. font-size: @font-size-base;
  46. line-height: @line-height-base;
  47. text-align: start;
  48. &::after {
  49. & when (@descriptions-item-trailing-colon=true) {
  50. content: ':';
  51. }
  52. & when not (@descriptions-item-trailing-colon=true) {
  53. content: ' ';
  54. }
  55. position: relative;
  56. top: -0.5px;
  57. margin: 0 @descriptions-item-label-colon-margin-right 0
  58. @descriptions-item-label-colon-margin-left;
  59. }
  60. &.@{descriptions-prefix-cls}-item-no-colon::after {
  61. content: ' ';
  62. }
  63. }
  64. &-item-no-label {
  65. &::after {
  66. margin: 0;
  67. content: '';
  68. }
  69. }
  70. &-item-content {
  71. display: table-cell;
  72. flex: 1;
  73. color: @text-color;
  74. font-size: @font-size-base;
  75. line-height: @line-height-base;
  76. word-break: break-word;
  77. overflow-wrap: break-word;
  78. }
  79. &-item {
  80. padding-bottom: 0;
  81. vertical-align: top;
  82. &-container {
  83. display: flex;
  84. .@{descriptions-prefix-cls}-item-label,
  85. .@{descriptions-prefix-cls}-item-content {
  86. display: inline-flex;
  87. align-items: baseline;
  88. }
  89. }
  90. }
  91. &-middle {
  92. .@{descriptions-prefix-cls}-row {
  93. > th,
  94. > td {
  95. padding-bottom: @padding-sm;
  96. }
  97. }
  98. }
  99. &-small {
  100. .@{descriptions-prefix-cls}-row {
  101. > th,
  102. > td {
  103. padding-bottom: @padding-xs;
  104. }
  105. }
  106. }
  107. &-bordered {
  108. .@{descriptions-prefix-cls}-view {
  109. border: 1px solid @border-color-split;
  110. > table {
  111. table-layout: auto;
  112. border-collapse: collapse;
  113. }
  114. }
  115. .@{descriptions-prefix-cls}-item-label,
  116. .@{descriptions-prefix-cls}-item-content {
  117. padding: @descriptions-default-padding;
  118. border-right: 1px solid @border-color-split;
  119. &:last-child {
  120. border-right: none;
  121. }
  122. }
  123. .@{descriptions-prefix-cls}-item-label {
  124. background-color: @descriptions-bg;
  125. &::after {
  126. display: none;
  127. }
  128. }
  129. .@{descriptions-prefix-cls}-row {
  130. border-bottom: 1px solid @border-color-split;
  131. &:last-child {
  132. border-bottom: none;
  133. }
  134. }
  135. &.@{descriptions-prefix-cls}-middle {
  136. .@{descriptions-prefix-cls}-item-label,
  137. .@{descriptions-prefix-cls}-item-content {
  138. padding: @descriptions-middle-padding;
  139. }
  140. }
  141. &.@{descriptions-prefix-cls}-small {
  142. .@{descriptions-prefix-cls}-item-label,
  143. .@{descriptions-prefix-cls}-item-content {
  144. padding: @descriptions-small-padding;
  145. }
  146. }
  147. }
  148. }
  149. @import './rtl';