hairline.scss
1.28 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
// @import '../theme/default.scss';
@mixin hairline-base {
position: absolute;
box-sizing: border-box;
content: ' ';
pointer-events: none;
transform-origin: center; /* cover wechat button:after default transforn-origin */
}
@mixin hairline($color: $border-color-2) {
@include hairline-base;
top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
border: 1px solid $color;
transform: scale(.5);
}
@mixin hairline-top($color: $border-color-1, $left: 0, $right: 0) {
@include hairline-base;
top: 0;
right: $right;
left: $left;
border-top: 1px solid $color;
transform: scaleY(0.5);
}
@mixin hairline-bottom($color: $border-color-1, $left: 0, $right: 0) {
@include hairline-base;
right: $right;
bottom: 0;
left: $left;
border-bottom: 1px solid $color;
transform: scaleY(0.5);
}
@mixin hairline-left($color: $border-bolor-1) {
@include hairline-base;
top: 0;
bottom: 0;
left: 0;
border-left: 1px solid $color;
transform: scaleX(.5);
}
@mixin hairline-right($color: $border-bolor-1) {
@include hairline-base;
top: 0;
bottom: 0;
right: 0;
border-right: 1px solid $color;
transform: scaleX(.5);
}
@mixin border {
/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
&:after {
@content;
}
/* #endif */
/* #ifdef APP-ANDROID || APP-IOS || APP-HARMONY */
@content;
/* #endif */
}