space-compact.less 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. @import '../../style/mixins/index';
  2. @btn-prefix-cls: ~'@{ant-prefix}-btn';
  3. // Button in Space.Compact
  4. .@{btn-prefix-cls} {
  5. .compact-item(@btn-prefix-cls);
  6. // make `btn-icon-only` not too narrow
  7. &-icon-only&-compact-item {
  8. flex: none;
  9. }
  10. // Special styles for Primary Button
  11. &-compact-item.@{btn-prefix-cls}-primary {
  12. &:not([disabled]) + &:not([disabled]):not([ant-click-animating-without-extra-node='true']) {
  13. position: relative;
  14. &::after {
  15. position: absolute;
  16. top: -@border-width-base;
  17. left: -@border-width-base;
  18. display: inline-block;
  19. width: @border-width-base;
  20. height: calc(100% + @border-width-base * 2);
  21. background-color: @btn-group-border;
  22. content: ' ';
  23. }
  24. }
  25. }
  26. // ----------RTL----------
  27. &-compact-item-rtl {
  28. &.@{btn-prefix-cls}-compact-first-item&:not(.@{btn-prefix-cls}-compact-last-item) {
  29. border-top-left-radius: 0;
  30. border-bottom-left-radius: 0;
  31. }
  32. &.@{btn-prefix-cls}-compact-last-item&:not(.@{btn-prefix-cls}-compact-first-item) {
  33. border-top-right-radius: 0;
  34. border-bottom-right-radius: 0;
  35. }
  36. &.@{btn-prefix-cls}-sm {
  37. &.@{btn-prefix-cls}-compact-first-item&:not(.@{btn-prefix-cls}-compact-last-item) {
  38. border-top-left-radius: 0;
  39. border-bottom-left-radius: 0;
  40. }
  41. &.@{btn-prefix-cls}-compact-last-item&:not(.@{btn-prefix-cls}-compact-first-item) {
  42. border-top-right-radius: 0;
  43. border-bottom-right-radius: 0;
  44. }
  45. }
  46. // ----------RTL Special styles for Primary Button----------
  47. &.@{btn-prefix-cls}-primary {
  48. &:not([disabled]) + &:not([disabled]) {
  49. &::after {
  50. right: -@border-width-base;
  51. }
  52. }
  53. }
  54. }
  55. // Button in Space.Compact when direction=vertical
  56. .compact-item-vertical(@btn-prefix-cls);
  57. // Special styles for Primary Button
  58. &-compact-vertical-item {
  59. &.@{btn-prefix-cls}-primary {
  60. &:not([disabled]) + &:not([disabled]):not([ant-click-animating-without-extra-node='true']) {
  61. position: relative;
  62. &::after {
  63. position: absolute;
  64. top: -@border-width-base;
  65. left: -@border-width-base;
  66. display: inline-block;
  67. width: calc(100% + @border-width-base * 2);
  68. height: @border-width-base;
  69. background-color: @btn-group-border;
  70. content: ' ';
  71. }
  72. }
  73. }
  74. }
  75. }