index.less 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. @segmented-prefix-cls: rc-segmented;
  2. @disabled-color: fade(#000, 25%);
  3. @selected-bg-color: white;
  4. @text-color: #262626;
  5. @transition-duration: 0.3s;
  6. @transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  7. .segmented-disabled-item() {
  8. &,
  9. &:hover,
  10. &:focus {
  11. color: @disabled-color;
  12. cursor: not-allowed;
  13. }
  14. }
  15. .segmented-item-selected() {
  16. background-color: @selected-bg-color;
  17. }
  18. .@{segmented-prefix-cls} {
  19. display: inline-block;
  20. padding: 2px;
  21. background-color: rgba(0, 0, 0, 0.04);
  22. &-group {
  23. position: relative;
  24. display: flex;
  25. flex-direction: row;
  26. align-items: stretch;
  27. justify-content: flex-start;
  28. width: 100%;
  29. border-radius: 2px;
  30. }
  31. &-item {
  32. position: relative;
  33. min-height: 28px;
  34. padding: 4px 10px;
  35. color: fade(#000, 85%);
  36. text-align: center;
  37. cursor: pointer;
  38. &-selected {
  39. .segmented-item-selected();
  40. color: @text-color;
  41. }
  42. &:hover,
  43. &:focus {
  44. color: @text-color;
  45. }
  46. &-disabled {
  47. .segmented-disabled-item();
  48. }
  49. &-label {
  50. z-index: 2;
  51. line-height: 24px;
  52. }
  53. &-input {
  54. position: absolute;
  55. top: 0;
  56. left: 0;
  57. width: 0;
  58. height: 0;
  59. opacity: 0;
  60. pointer-events: none;
  61. }
  62. }
  63. &-thumb {
  64. .segmented-item-selected();
  65. position: absolute;
  66. width: 0;
  67. height: 100%;
  68. padding: 4px 0;
  69. transition: transform @transition-duration @transition-timing-function,
  70. width @transition-duration @transition-timing-function;
  71. }
  72. &-vertical &-group {
  73. flex-direction: column;
  74. }
  75. &-vertical &-item {
  76. width: 100%;
  77. text-align: left;
  78. }
  79. &-vertical &-thumb {
  80. width: 100%;
  81. height: 0;
  82. padding: 0 4px;
  83. transition: transform @transition-duration @transition-timing-function,
  84. height @transition-duration @transition-timing-function;
  85. }
  86. // disabled styles
  87. &-disabled &-item,
  88. &-disabled &-item:hover,
  89. &-disabled &-item:focus {
  90. .segmented-disabled-item();
  91. }
  92. &-thumb-motion-appear-active,
  93. &-thumb-motion-enter-active {
  94. transition: transform @transition-duration @transition-timing-function,
  95. width @transition-duration @transition-timing-function;
  96. will-change: transform, width;
  97. }
  98. &-rtl {
  99. direction: rtl;
  100. }
  101. }
  102. .rc-segmented-item {
  103. &:focus {
  104. outline: none;
  105. }
  106. &-focused {
  107. border-radius: 2px;
  108. box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
  109. }
  110. }