customize.less 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. // customize dark components background in popover containers(like Modal, Drawer, Card, Popover, Popconfirm, Notification, ...)
  2. // for dark theme
  3. .popover-customize-bg(@containerClass, @background: @popover-background, @prefix: @ant-prefix)
  4. when
  5. (@theme = dark) {
  6. @picker-prefix-cls: ~'@{prefix}-picker';
  7. @slider-prefix-cls: ~'@{prefix}-slider';
  8. @anchor-prefix-cls: ~'@{prefix}-anchor';
  9. @collapse-prefix-cls: ~'@{prefix}-collapse';
  10. @tab-prefix-cls: ~'@{prefix}-tabs';
  11. @timeline-prefix-cls: ~'@{prefix}-timeline';
  12. @tree-prefix-cls: ~'@{prefix}-tree';
  13. @card-prefix-cls: ~'@{prefix}-card';
  14. @badge-prefix-cls: ~'@{prefix}-badge';
  15. @transfer-prefix-cls: ~'@{prefix}-transfer';
  16. @calendar-prefix-cls: ~'@{prefix}-picker-calendar';
  17. @calendar-picker-prefix-cls: ~'@{prefix}-picker';
  18. @table-prefix-cls: ~'@{prefix}-table';
  19. @popover-border: @border-width-base @border-style-base @popover-customize-border-color;
  20. .@{containerClass} {
  21. .@{picker-prefix-cls}-clear,
  22. .@{slider-prefix-cls}-handle,
  23. .@{anchor-prefix-cls}-wrapper,
  24. .@{collapse-prefix-cls}-content,
  25. .@{timeline-prefix-cls}-item-head,
  26. .@{card-prefix-cls} {
  27. background-color: @background;
  28. }
  29. .@{transfer-prefix-cls} {
  30. &-list {
  31. &-header {
  32. background: @background;
  33. border-bottom: @popover-border;
  34. }
  35. &-content-item:not(.@{transfer-prefix-cls}-list-content-item-disabled):hover {
  36. background-color: @item-hover-bg;
  37. }
  38. }
  39. }
  40. tr.@{table-prefix-cls}-expanded-row {
  41. &,
  42. &:hover {
  43. > td {
  44. background: #272727;
  45. }
  46. }
  47. }
  48. .@{table-prefix-cls}.@{table-prefix-cls}-small {
  49. thead {
  50. > tr {
  51. > th {
  52. background-color: @background;
  53. border-bottom: @popover-border;
  54. }
  55. }
  56. }
  57. }
  58. .@{table-prefix-cls} {
  59. background-color: @background;
  60. .@{table-prefix-cls}-row-expand-icon {
  61. border: @popover-border;
  62. }
  63. tfoot {
  64. > tr {
  65. > th,
  66. > td {
  67. border-bottom: @popover-border;
  68. }
  69. }
  70. }
  71. thead {
  72. > tr {
  73. > th {
  74. background-color: #272727;
  75. border-bottom: @popover-border;
  76. }
  77. }
  78. }
  79. tbody {
  80. > tr {
  81. > td {
  82. border-bottom: @popover-border;
  83. &.@{table-prefix-cls}-cell-fix-left,
  84. &.@{table-prefix-cls}-cell-fix-right {
  85. background-color: @background;
  86. }
  87. }
  88. &.@{table-prefix-cls}-row:hover {
  89. > td {
  90. background: @table-header-sort-active-bg;
  91. }
  92. }
  93. }
  94. }
  95. &.@{table-prefix-cls}-bordered {
  96. .@{table-prefix-cls}-title {
  97. border: @popover-border;
  98. }
  99. // ============================= Cell =============================
  100. thead > tr > th,
  101. tbody > tr > td,
  102. tfoot > tr > th,
  103. tfoot > tr > td {
  104. border-right: @popover-border;
  105. }
  106. // Fixed right should provides additional border
  107. .@{table-prefix-cls}-cell-fix-right-first::after {
  108. border-right: @popover-border;
  109. }
  110. // ============================ Header ============================
  111. table > {
  112. thead {
  113. > tr:not(:last-child) > th {
  114. border-bottom: @border-width-base @border-style-base @border-color-split;
  115. }
  116. }
  117. }
  118. // =========================== Content ============================
  119. .@{table-prefix-cls}-container {
  120. border: @popover-border;
  121. }
  122. // ========================== Expandable ==========================
  123. .@{table-prefix-cls}-expanded-row-fixed {
  124. &::after {
  125. border-right: @popover-border;
  126. }
  127. }
  128. .@{table-prefix-cls}-footer {
  129. border: @popover-border;
  130. }
  131. }
  132. .@{table-prefix-cls}-filter-trigger-container-open {
  133. background-color: #525252;
  134. }
  135. }
  136. .@{calendar-prefix-cls}-full {
  137. background-color: @background;
  138. .@{calendar-picker-prefix-cls}-panel {
  139. background-color: @background;
  140. .@{calendar-prefix-cls}-date {
  141. border-top: 2px solid @popover-customize-border-color;
  142. }
  143. }
  144. }
  145. .@{tab-prefix-cls} {
  146. &.@{tab-prefix-cls}-card .@{tab-prefix-cls}-card-bar .@{tab-prefix-cls}-tab-active {
  147. background-color: @background;
  148. border-bottom: @border-width-base solid @background;
  149. }
  150. }
  151. .@{badge-prefix-cls} {
  152. &-count {
  153. box-shadow: 0 0 0 1px @background;
  154. }
  155. }
  156. .@{tree-prefix-cls} {
  157. &-show-line {
  158. .@{tree-prefix-cls}-switcher {
  159. background: @background;
  160. }
  161. }
  162. }
  163. }
  164. }