blob: 2422bd2260cc835191bd7b3be6ddca8bd5a2639a (
plain)
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
/*
BORDER RADIUS
Docs: http://tachyons.io/docs/themes/border-radius/
Base:
br = border-radius
Modifiers:
0 = 0/none
1 = 1st step in scale
2 = 2nd step in scale
3 = 3rd step in scale
4 = 4th step in scale
Literal values:
-100 = 100%
-pill = 9999px
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
:root {
--border-radius: .25rem;
}
.br0 { border-radius: 0; }
.br1 { border-radius: var(--border-radius); }
.br-100 { border-radius: 100%; }
.br-pill { border-radius: 9999px; }
.br--bottom {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.br--top {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.br--right {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.br--left {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
@media (--breakpoint-not-small) {
.br0-ns { border-radius: 0; }
.br1-ns { border-radius: var(--border-radius); }
.br-100-ns { border-radius: 100%; }
.br-pill-ns { border-radius: 9999px; }
.br--bottom-ns {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.br--top-ns {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.br--right-ns {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.br--left-ns {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
@media (--breakpoint-medium) {
.br0-m { border-radius: 0; }
.br1-m { border-radius: var(--border-radius); }
.br-100-m { border-radius: 100%; }
.br-pill-m { border-radius: 9999px; }
.br--bottom-m {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.br--top-m {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.br--right-m {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.br--left-m {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
@media (--breakpoint-large) {
.br0-l { border-radius: 0; }
.br1-l { border-radius: var(--border-radius); }
.br-100-l { border-radius: 100%; }
.br-pill-l { border-radius: 9999px; }
.br--bottom-l {
border-radius-top-left: 0;
border-radius-top-right: 0;
}
.br--top-l {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.br--right-l {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.br--left-l {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
|
