hairline.less 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. @import (reference) '../themes/color.less';
  2. .scale-hairline-common(@color, @top, @right, @bottom, @left) {
  3. content: '';
  4. position: absolute;
  5. background-color: @color;
  6. display: block;
  7. top: @top;
  8. right: @right;
  9. bottom: @bottom;
  10. left: @left;
  11. }
  12. .hairline(@direction, @color: @COLOR_BORDER) when (@direction = 'top') {
  13. &::before {
  14. .scale-hairline-common(@color, 0, 0, auto, 0);
  15. height: 1px;
  16. transform: scaleY(0.5);
  17. }
  18. }
  19. .hairline(@direction, @color: @COLOR_BORDER) when (@direction = 'right') {
  20. &::after {
  21. .scale-hairline-common(@color, 0, 0, 0, auto);
  22. width: 1px;
  23. transform: scaleX(0.5);
  24. }
  25. }
  26. .hairline(@direction, @color: @COLOR_BORDER) when (@direction = 'bottom') {
  27. &::after {
  28. .scale-hairline-common(@color, auto, 0, 0, 0);
  29. height: 1px;
  30. transform: scaleY(0.5);
  31. }
  32. }
  33. .hairline-popover(@direction, @color: @COLOR_BORDER)
  34. when
  35. (@direction = 'bottom') {
  36. &::after {
  37. .scale-hairline-common(@color, auto, 0, 0, 104 * @rpx);
  38. height: 1px;
  39. transform: scaleY(0.5);
  40. }
  41. }
  42. .hairline-collapse(@direction, @color: @COLOR_BORDER)
  43. when
  44. (@direction = 'bottom') {
  45. &::after {
  46. .scale-hairline-common(@color, auto, 0, 0, 24 * @rpx);
  47. height: 1px;
  48. transform: scaleY(0.5);
  49. width: 100%;
  50. }
  51. }
  52. .hairline-picker(@direction) when (@direction = 'bottom') {
  53. &::after {
  54. .scale-hairline-common(#e5e5e5, auto, 0, 0, 0);
  55. height: 1px;
  56. transform: scaleY(0.5);
  57. width: 100%;
  58. }
  59. }
  60. .hairline-radius(@color: @COLOR_BORDER, @radius) {
  61. position: relative;
  62. &::before {
  63. content: '';
  64. position: absolute;
  65. top: 0;
  66. left: 0;
  67. width: 200%;
  68. height: 200%;
  69. transform-origin: 0 0;
  70. pointer-events: none;
  71. border: 1px solid @color;
  72. border-radius: @radius;
  73. transform: scale(0.5);
  74. box-sizing: border-box;
  75. }
  76. }