index.less 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. @import '../style/themes/index.less';
  2. @keyframes text-animate-right {
  3. 33% {
  4. margin-left: -10 * @rpx;
  5. }
  6. 66% {
  7. margin-left: 10 * @rpx;
  8. }
  9. 100% {
  10. margin-left: 0 * @rpx;
  11. }
  12. }
  13. @keyframes text-animate-midd {
  14. 0% {
  15. margin-left: 44 * @rpx;
  16. }
  17. 100% {
  18. margin-left: 0 * @rpx;
  19. }
  20. }
  21. @keyframes text-animate-left {
  22. 33% {
  23. margin-left: 10 * @rpx;
  24. }
  25. 66% {
  26. margin-left: -10 * @rpx;
  27. }
  28. 100% {
  29. margin-left: 0 * @rpx;
  30. }
  31. }
  32. .text-move-right {
  33. animation-name: text-animate-right;
  34. animation-duration: 500ms;
  35. }
  36. .text-move-left {
  37. animation-name: text-animate-left;
  38. animation-duration: 500ms;
  39. }
  40. .text-move-midd {
  41. animation-name: text-animate-midd;
  42. animation-duration: 500ms;
  43. }
  44. .ant-swipe {
  45. width: 100%;
  46. height: 100%;
  47. overflow: hidden;
  48. &-action {
  49. height: 100%;
  50. position: relative;
  51. &-movable {
  52. width: 100%;
  53. height: 100%;
  54. &-content {
  55. height: 100%;
  56. position: relative;
  57. &-view {
  58. height: 100%;
  59. &-modal {
  60. width: 100%;
  61. height: 100%;
  62. background: transparent;
  63. position: absolute;
  64. left: 0;
  65. top: 0;
  66. z-index: 9;
  67. }
  68. }
  69. &-right {
  70. height: 100%;
  71. color: @COLOR_WHITE;
  72. &-text {
  73. height: 100%;
  74. display: flex;
  75. align-items: center;
  76. justify-content: center;
  77. transition: all 120ms cubic-bezier(0.2, 0.2, 0.8, 1);
  78. .right-text {
  79. text-align: center;
  80. white-space: nowrap;
  81. }
  82. }
  83. }
  84. &-left {
  85. position: absolute;
  86. right: 0;
  87. top: 0;
  88. color: @COLOR_WHITE;
  89. display: flex;
  90. flex-direction: row;
  91. justify-content: flex-end;
  92. &-text1 {
  93. height: 100%;
  94. display: flex;
  95. align-items: center;
  96. justify-content: flex-end;
  97. transition: all 120ms cubic-bezier(0.2, 0.2, 0.8, 1);
  98. .right-text {
  99. text-align: center;
  100. white-space: nowrap;
  101. }
  102. }
  103. }
  104. }
  105. }
  106. }
  107. }
  108. .ant-swipe-action-is-right-swipe {
  109. display: flex;
  110. flex-direction: row;
  111. justify-content: flex-end;
  112. }