1
0

hairline.scss 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. // @import '../theme/default.scss';
  2. @mixin hairline-base {
  3. position: absolute;
  4. box-sizing: border-box;
  5. content: ' ';
  6. pointer-events: none;
  7. transform-origin: center; /* cover wechat button:after default transforn-origin */
  8. }
  9. @mixin hairline($color: $border-color-2) {
  10. @include hairline-base;
  11. top: -50%;
  12. right: -50%;
  13. bottom: -50%;
  14. left: -50%;
  15. border: 1px solid $color;
  16. transform: scale(.5);
  17. }
  18. @mixin hairline-top($color: $border-color-1, $left: 0, $right: 0) {
  19. @include hairline-base;
  20. top: 0;
  21. right: $right;
  22. left: $left;
  23. border-top: 1px solid $color;
  24. transform: scaleY(0.5);
  25. }
  26. @mixin hairline-bottom($color: $border-color-1, $left: 0, $right: 0) {
  27. @include hairline-base;
  28. right: $right;
  29. bottom: 0;
  30. left: $left;
  31. border-bottom: 1px solid $color;
  32. transform: scaleY(0.5);
  33. }
  34. @mixin hairline-left($color: $border-bolor-1) {
  35. @include hairline-base;
  36. top: 0;
  37. bottom: 0;
  38. left: 0;
  39. border-left: 1px solid $color;
  40. transform: scaleX(.5);
  41. }
  42. @mixin hairline-right($color: $border-bolor-1) {
  43. @include hairline-base;
  44. top: 0;
  45. bottom: 0;
  46. right: 0;
  47. border-right: 1px solid $color;
  48. transform: scaleX(.5);
  49. }