123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181 |
- // customize dark components background in popover containers(like Modal, Drawer, Card, Popover, Popconfirm, Notification, ...)
- // for dark theme
- .popover-customize-bg(@containerClass, @background: @popover-background, @prefix: @ant-prefix)
- when
- (@theme = dark) {
- @picker-prefix-cls: ~'@{prefix}-picker';
- @slider-prefix-cls: ~'@{prefix}-slider';
- @anchor-prefix-cls: ~'@{prefix}-anchor';
- @collapse-prefix-cls: ~'@{prefix}-collapse';
- @tab-prefix-cls: ~'@{prefix}-tabs';
- @timeline-prefix-cls: ~'@{prefix}-timeline';
- @tree-prefix-cls: ~'@{prefix}-tree';
- @card-prefix-cls: ~'@{prefix}-card';
- @badge-prefix-cls: ~'@{prefix}-badge';
- @transfer-prefix-cls: ~'@{prefix}-transfer';
- @calendar-prefix-cls: ~'@{prefix}-picker-calendar';
- @calendar-picker-prefix-cls: ~'@{prefix}-picker';
- @table-prefix-cls: ~'@{prefix}-table';
- @popover-border: @border-width-base @border-style-base @popover-customize-border-color;
- .@{containerClass} {
- .@{picker-prefix-cls}-clear,
- .@{slider-prefix-cls}-handle,
- .@{anchor-prefix-cls}-wrapper,
- .@{collapse-prefix-cls}-content,
- .@{timeline-prefix-cls}-item-head,
- .@{card-prefix-cls} {
- background-color: @background;
- }
- .@{transfer-prefix-cls} {
- &-list {
- &-header {
- background: @background;
- border-bottom: @popover-border;
- }
- &-content-item:not(.@{transfer-prefix-cls}-list-content-item-disabled):hover {
- background-color: @item-hover-bg;
- }
- }
- }
- tr.@{table-prefix-cls}-expanded-row {
- &,
- &:hover {
- > td {
- background: #272727;
- }
- }
- }
- .@{table-prefix-cls}.@{table-prefix-cls}-small {
- thead {
- > tr {
- > th {
- background-color: @background;
- border-bottom: @popover-border;
- }
- }
- }
- }
- .@{table-prefix-cls} {
- background-color: @background;
- .@{table-prefix-cls}-row-expand-icon {
- border: @popover-border;
- }
- tfoot {
- > tr {
- > th,
- > td {
- border-bottom: @popover-border;
- }
- }
- }
- thead {
- > tr {
- > th {
- background-color: #272727;
- border-bottom: @popover-border;
- }
- }
- }
- tbody {
- > tr {
- > td {
- border-bottom: @popover-border;
- &.@{table-prefix-cls}-cell-fix-left,
- &.@{table-prefix-cls}-cell-fix-right {
- background-color: @background;
- }
- }
- &.@{table-prefix-cls}-row:hover {
- > td {
- background: @table-header-sort-active-bg;
- }
- }
- }
- }
- &.@{table-prefix-cls}-bordered {
- .@{table-prefix-cls}-title {
- border: @popover-border;
- }
- // ============================= Cell =============================
- thead > tr > th,
- tbody > tr > td,
- tfoot > tr > th,
- tfoot > tr > td {
- border-right: @popover-border;
- }
- // Fixed right should provides additional border
- .@{table-prefix-cls}-cell-fix-right-first::after {
- border-right: @popover-border;
- }
- // ============================ Header ============================
- table > {
- thead {
- > tr:not(:last-child) > th {
- border-bottom: @border-width-base @border-style-base @border-color-split;
- }
- }
- }
- // =========================== Content ============================
- .@{table-prefix-cls}-container {
- border: @popover-border;
- }
- // ========================== Expandable ==========================
- .@{table-prefix-cls}-expanded-row-fixed {
- &::after {
- border-right: @popover-border;
- }
- }
- .@{table-prefix-cls}-footer {
- border: @popover-border;
- }
- }
- .@{table-prefix-cls}-filter-trigger-container-open {
- background-color: #525252;
- }
- }
- .@{calendar-prefix-cls}-full {
- background-color: @background;
- .@{calendar-picker-prefix-cls}-panel {
- background-color: @background;
- .@{calendar-prefix-cls}-date {
- border-top: 2px solid @popover-customize-border-color;
- }
- }
- }
- .@{tab-prefix-cls} {
- &.@{tab-prefix-cls}-card .@{tab-prefix-cls}-card-bar .@{tab-prefix-cls}-tab-active {
- background-color: @background;
- border-bottom: @border-width-base solid @background;
- }
- }
- .@{badge-prefix-cls} {
- &-count {
- box-shadow: 0 0 0 1px @background;
- }
- }
- .@{tree-prefix-cls} {
- &-show-line {
- .@{tree-prefix-cls}-switcher {
- background: @background;
- }
- }
- }
- }
- }
|