UNPKG

3.58 kBCSSView Raw
1/*
2
3 BORDER RADIUS
4 Docs: http://tachyons.io/docs/themes/border-radius/
5
6 Base:
7 br = border-radius
8
9 Modifiers:
10 0 = 0/none
11 1 = 1st step in scale
12 2 = 2nd step in scale
13 3 = 3rd step in scale
14 4 = 4th step in scale
15
16 Literal values:
17 -100 = 100%
18 -pill = 9999px
19
20 Media Query Extensions:
21 -ns = not-small
22 -m = medium
23 -l = large
24
25*/
26
27 .br0 { border-radius: var(--border-radius-none) }
28 .br1 { border-radius: var(--border-radius-1); }
29 .br2 { border-radius: var(--border-radius-2); }
30 .br3 { border-radius: var(--border-radius-3); }
31 .br4 { border-radius: var(--border-radius-4); }
32 .br-100 { border-radius: var(--border-radius-circle); }
33 .br-pill { border-radius: var(--border-radius-pill); }
34 .br--bottom {
35 border-top-left-radius: 0;
36 border-top-right-radius: 0;
37 }
38 .br--top {
39 border-bottom-left-radius: 0;
40 border-bottom-right-radius: 0;
41 }
42 .br--right {
43 border-top-left-radius: 0;
44 border-bottom-left-radius: 0;
45 }
46 .br--left {
47 border-top-right-radius: 0;
48 border-bottom-right-radius: 0;
49 }
50
51@media (--breakpoint-not-small) {
52 .br0-ns { border-radius: var(--border-radius-none) }
53 .br1-ns { border-radius: var(--border-radius-1); }
54 .br2-ns { border-radius: var(--border-radius-2); }
55 .br3-ns { border-radius: var(--border-radius-3); }
56 .br4-ns { border-radius: var(--border-radius-4); }
57 .br-100-ns { border-radius: var(--border-radius-circle); }
58 .br-pill-ns { border-radius: var(--border-radius-pill); }
59 .br--bottom-ns {
60 border-top-left-radius: 0;
61 border-top-right-radius: 0;
62 }
63 .br--top-ns {
64 border-bottom-left-radius: 0;
65 border-bottom-right-radius: 0;
66 }
67 .br--right-ns {
68 border-top-left-radius: 0;
69 border-bottom-left-radius: 0;
70 }
71 .br--left-ns {
72 border-top-right-radius: 0;
73 border-bottom-right-radius: 0;
74 }
75}
76
77@media (--breakpoint-medium) {
78 .br0-m { border-radius: var(--border-radius-none) }
79 .br1-m { border-radius: var(--border-radius-1); }
80 .br2-m { border-radius: var(--border-radius-2); }
81 .br3-m { border-radius: var(--border-radius-3); }
82 .br4-m { border-radius: var(--border-radius-4); }
83 .br-100-m { border-radius: var(--border-radius-circle); }
84 .br-pill-m { border-radius: var(--border-radius-pill); }
85 .br--bottom-m {
86 border-top-left-radius: 0;
87 border-top-right-radius: 0;
88 }
89 .br--top-m {
90 border-bottom-left-radius: 0;
91 border-bottom-right-radius: 0;
92 }
93 .br--right-m {
94 border-top-left-radius: 0;
95 border-bottom-left-radius: 0;
96 }
97 .br--left-m {
98 border-top-right-radius: 0;
99 border-bottom-right-radius: 0;
100 }
101}
102
103@media (--breakpoint-large) {
104 .br0-l { border-radius: var(--border-radius-none) }
105 .br1-l { border-radius: var(--border-radius-1); }
106 .br2-l { border-radius: var(--border-radius-2); }
107 .br3-l { border-radius: var(--border-radius-3); }
108 .br4-l { border-radius: var(--border-radius-4); }
109 .br-100-l { border-radius: var(--border-radius-circle); }
110 .br-pill-l { border-radius: var(--border-radius-pill); }
111 .br--bottom-l {
112 border-radius-top-left: 0;
113 border-radius-top-right: 0;
114 }
115 .br--top-l {
116 border-bottom-left-radius: 0;
117 border-bottom-right-radius: 0;
118 }
119 .br--right-l {
120 border-top-left-radius: 0;
121 border-bottom-left-radius: 0;
122 }
123 .br--left-l {
124 border-top-right-radius: 0;
125 border-bottom-right-radius: 0;
126 }
127}