index.less 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. @import (reference) './variable.less';
  2. @buttonPrefix: ant-button;
  3. .@{buttonPrefix} {
  4. position: relative;
  5. display: flex;
  6. flex-direction: column;
  7. justify-self: center;
  8. align-items: center;
  9. height: auto;
  10. line-height: normal;
  11. padding: @button-padding;
  12. border-radius: @button-corner-radius;
  13. border: 0 none;
  14. box-sizing: border-box;
  15. font-size: 36 * @rpx;
  16. z-index: 2;
  17. &-large {
  18. font-size: 36 * @rpx;
  19. padding: 24 * @rpx 24 * @rpx 24 * @rpx 24 * @rpx;
  20. }
  21. &-medium {
  22. font-size: 34 * @rpx;
  23. padding: 16 * @rpx 24 * @rpx 16 * @rpx 24 * @rpx;
  24. }
  25. &-small {
  26. font-size: 30 * @rpx;
  27. padding: 8 * @rpx 24 * @rpx 8 * @rpx 24 * @rpx;
  28. }
  29. &-primary {
  30. color: @button-primary-color;
  31. background-color: @button-primary-background-color;
  32. box-shadow: inset 0 0 0 @button-border-size @COLOR_BRAND1;
  33. }
  34. &-default {
  35. color: @COLOR_BRAND1;
  36. background-color: @COLOR_CARD;
  37. box-shadow: inset 0 0 0 @button-border-size @COLOR_BRAND1;
  38. }
  39. &-text {
  40. color: @COLOR_BRAND1;
  41. background-color: transparent;
  42. box-shadow: none;
  43. }
  44. &-primary-danger {
  45. color: @button-danger-color;
  46. background-color: @COLOR_RED;
  47. box-shadow: inset 0 0 0 @button-border-size @COLOR_RED;
  48. }
  49. &-default-danger {
  50. color: @COLOR_RED;
  51. background-color: @COLOR_CARD;
  52. box-shadow: inset 0 0 0 @button-border-size @COLOR_RED;
  53. }
  54. &-text-danger {
  55. color: @COLOR_RED;
  56. background-color: transparent;
  57. box-shadow: none;
  58. }
  59. &-text-active {
  60. background-color: fade(@COLOR_WHITE_CHANGE, 92);
  61. }
  62. &-active {
  63. filter: brightness(0.92);
  64. }
  65. &-disabled {
  66. opacity: @button-disabled-opacity;
  67. }
  68. &-wrap {
  69. display: flex;
  70. flex-direction: row;
  71. align-items: center;
  72. justify-content: center;
  73. }
  74. &-content-text-margin {
  75. margin-left: @h-spacing-standard;
  76. }
  77. &-content-text {
  78. &:empty {
  79. margin-left: 0;
  80. width: 0;
  81. opacity: 0;
  82. &::after {
  83. content: '\00a0';
  84. }
  85. }
  86. }
  87. &-content-subtext {
  88. font-size: @button-subtext-size;
  89. opacity: 0.6;
  90. }
  91. &-content-loading-container {
  92. display: flex;
  93. justify-content: center;
  94. align-items: center;
  95. width: 33px;
  96. height: 16px;
  97. margin-left: 8px;
  98. }
  99. &-content-loading {
  100. position: relative;
  101. }
  102. &-inline {
  103. display: inline-block;
  104. border-radius: @button-inline-corner;
  105. .@{buttonPrefix}-content-loading-container {
  106. width: 16px;
  107. height: 16px;
  108. }
  109. .@{buttonPrefix}-content-loading {
  110. transform: scale(0.5);
  111. }
  112. }
  113. }