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
|
/// Draw borders around an element.
%draw-borders {
background-image: linear-gradient(
to right,
var(--draw-border-color2),
var(--draw-border-color1)
),
linear-gradient(
to bottom,
var(--draw-border-color1),
var(--draw-border-color2)
),
linear-gradient(
to left,
var(--draw-border-color2),
var(--draw-border-color1)
),
linear-gradient(
to top,
var(--draw-border-color1),
var(--draw-border-color2)
);
background-position: top left, top right, bottom right, bottom left;
background-repeat: no-repeat;
background-size: 100% var(--draw-border-thickness),
var(--draw-border-thickness) 100%, 100% var(--draw-border-thickness),
var(--draw-border-thickness) 100%;
color: var(--draw-border-color1);
:global {
animation: draw-borders 0.8s linear 1 0s;
}
}
|
