1px.less 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. .setLine(@c: #eee) {
  2. content: " ";
  3. position: absolute;
  4. left: 0;
  5. top: 0;
  6. width: 200%;
  7. border: 1rpx solid @c;
  8. color: @c;
  9. height: 200%;
  10. transform-origin: left top;
  11. transform: scale(0.5);
  12. }
  13. .vh-1px, .vh-1px-t, .vh-1px-b, .vh-1px-tb, .vh-1px-l, .vh-1px-r {
  14. position: relative;
  15. }
  16. .vh-1px {
  17. &:before {
  18. .setLine();
  19. }
  20. }
  21. .vh-1px-t {
  22. &:before {
  23. .setTopLine();
  24. }
  25. }
  26. .vh-1px-b {
  27. &:after {
  28. .setBottomLine();
  29. }
  30. }
  31. .vh-1px-tb {
  32. &:before {
  33. .setTopLine();
  34. }
  35. &:after {
  36. .setBottomLine();
  37. }
  38. }
  39. .vh-1px-l {
  40. &:before {
  41. .setLeftLine();
  42. }
  43. }
  44. .vh-1px-r {
  45. &:after {
  46. .setRightLine();
  47. }
  48. }
  49. .setTopLine(@c: #eee) {
  50. content: " ";
  51. position: absolute;
  52. left: 0;
  53. top: 0;
  54. right: 0;
  55. height: 1rpx;
  56. border-top: 1rpx solid @c;
  57. color: @c;
  58. transform-origin: 0 0;
  59. transform: scaleY(0.5);
  60. }
  61. .setBottomLine(@c: #eee) {
  62. content: " ";
  63. position: absolute;
  64. left: 0;
  65. bottom: 0;
  66. right: 0;
  67. height: 1rpx;
  68. border-bottom: 1rpx solid @c;
  69. color: @c;
  70. transform-origin: 0 100%;
  71. transform: scaleY(0.5);
  72. }
  73. .setLeftLine(@c: #eee) {
  74. content: " ";
  75. position: absolute;
  76. left: 0;
  77. top: 0;
  78. width: 1rpx;
  79. bottom: 0;
  80. border-left: 1rpx solid @c;
  81. color: @c;
  82. transform-origin: 0 0;
  83. transform: scaleX(0.5);
  84. }
  85. .setRightLine(@c: #eee) {
  86. content: " ";
  87. position: absolute;
  88. right: 0;
  89. top: 0;
  90. width: 1rpx;
  91. bottom: 0;
  92. border-right: 1rpx solid @c;
  93. color: @c;
  94. transform-origin: 100% 0;
  95. transform: scaleX(0.5);
  96. }