card.less 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. @import '../../style/themes/index';
  2. @import '../../style/mixins/index';
  3. @tab-prefix-cls: ~'@{ant-prefix}-tabs';
  4. .@{tab-prefix-cls}-card {
  5. > .@{tab-prefix-cls}-nav,
  6. > div > .@{tab-prefix-cls}-nav {
  7. .@{tab-prefix-cls}-tab {
  8. margin: 0;
  9. padding: @tabs-card-horizontal-padding;
  10. background: @tabs-card-head-background;
  11. border: @border-width-base @border-style-base @border-color-split;
  12. transition: all @animation-duration-slow @ease-in-out;
  13. &-active {
  14. color: @tabs-card-active-color;
  15. background: @component-background;
  16. }
  17. }
  18. .@{tab-prefix-cls}-ink-bar {
  19. visibility: hidden;
  20. }
  21. }
  22. // ========================== Top & Bottom ==========================
  23. &.@{tab-prefix-cls}-top,
  24. &.@{tab-prefix-cls}-bottom {
  25. > .@{tab-prefix-cls}-nav,
  26. > div > .@{tab-prefix-cls}-nav {
  27. .@{tab-prefix-cls}-tab + .@{tab-prefix-cls}-tab {
  28. margin-left: @tabs-card-gutter;
  29. }
  30. }
  31. }
  32. &.@{tab-prefix-cls}-top {
  33. > .@{tab-prefix-cls}-nav,
  34. > div > .@{tab-prefix-cls}-nav {
  35. .@{tab-prefix-cls}-tab {
  36. border-radius: @border-radius-base @border-radius-base 0 0;
  37. &-active {
  38. border-bottom-color: @component-background;
  39. }
  40. }
  41. }
  42. }
  43. &.@{tab-prefix-cls}-bottom {
  44. > .@{tab-prefix-cls}-nav,
  45. > div > .@{tab-prefix-cls}-nav {
  46. .@{tab-prefix-cls}-tab {
  47. border-radius: 0 0 @border-radius-base @border-radius-base;
  48. &-active {
  49. border-top-color: @component-background;
  50. }
  51. }
  52. }
  53. }
  54. // ========================== Left & Right ==========================
  55. &.@{tab-prefix-cls}-left,
  56. &.@{tab-prefix-cls}-right {
  57. > .@{tab-prefix-cls}-nav,
  58. > div > .@{tab-prefix-cls}-nav {
  59. .@{tab-prefix-cls}-tab + .@{tab-prefix-cls}-tab {
  60. margin-top: @tabs-card-gutter;
  61. }
  62. }
  63. }
  64. &.@{tab-prefix-cls}-left {
  65. > .@{tab-prefix-cls}-nav,
  66. > div > .@{tab-prefix-cls}-nav {
  67. .@{tab-prefix-cls}-tab {
  68. border-radius: @border-radius-base 0 0 @border-radius-base;
  69. &-active {
  70. border-right-color: @component-background;
  71. }
  72. }
  73. }
  74. }
  75. &.@{tab-prefix-cls}-right {
  76. > .@{tab-prefix-cls}-nav,
  77. > div > .@{tab-prefix-cls}-nav {
  78. .@{tab-prefix-cls}-tab {
  79. border-radius: 0 @border-radius-base @border-radius-base 0;
  80. &-active {
  81. border-left-color: @component-background;
  82. }
  83. }
  84. }
  85. }
  86. }