2d3ca553 |
1 | @charset "UTF-8"; |
2 | |
3 | /// Provides a concise, one-line method for setting `border-radius` on both the |
4 | /// top-left and top-right of a box. |
5 | /// |
6 | /// @argument {number (with unit)} $radii |
7 | /// |
8 | /// @example scss |
9 | /// .element { |
10 | /// @include border-top-radius(4px); |
11 | /// } |
12 | /// |
13 | /// // CSS Output |
14 | /// .element { |
15 | /// border-top-left-radius: 4px; |
16 | /// border-top-right-radius: 4px; |
17 | /// } |
18 | |
19 | @mixin border-top-radius($radii) { |
20 | border-top-left-radius: $radii; |
21 | border-top-right-radius: $radii; |
22 | } |
23 | |
24 | /// Provides a concise, one-line method for setting `border-radius` on both the |
25 | /// top-right and bottom-right of a box. |
26 | /// |
27 | /// @argument {number (with unit)} $radii |
28 | /// |
29 | /// @example scss |
30 | /// .element { |
31 | /// @include border-right-radius(3px); |
32 | /// } |
33 | /// |
34 | /// // CSS Output |
35 | /// .element { |
36 | /// border-bottom-right-radius: 3px; |
37 | /// border-top-right-radius: 3px; |
38 | /// } |
39 | |
40 | @mixin border-right-radius($radii) { |
41 | border-bottom-right-radius: $radii; |
42 | border-top-right-radius: $radii; |
43 | } |
44 | |
45 | /// Provides a concise, one-line method for setting `border-radius` on both the |
46 | /// bottom-left and bottom-right of a box. |
47 | /// |
48 | /// @argument {number (with unit)} $radii |
49 | /// |
50 | /// @example scss |
51 | /// .element { |
52 | /// @include border-bottom-radius(2px); |
53 | /// } |
54 | /// |
55 | /// // CSS Output |
56 | /// .element { |
57 | /// border-bottom-left-radius: 2px; |
58 | /// border-bottom-right-radius: 2px; |
59 | /// } |
60 | |
61 | @mixin border-bottom-radius($radii) { |
62 | border-bottom-left-radius: $radii; |
63 | border-bottom-right-radius: $radii; |
64 | } |
65 | |
66 | /// Provides a concise, one-line method for setting `border-radius` on both the |
67 | /// top-left and bottom-left of a box. |
68 | /// |
69 | /// @argument {number (with unit)} $radii |
70 | /// |
71 | /// @example scss |
72 | /// .element { |
73 | /// @include border-left-radius(1px); |
74 | /// } |
75 | /// |
76 | /// // CSS Output |
77 | /// .element { |
78 | /// border-bottom-left-radius: 1px; |
79 | /// border-top-left-radius: 1px; |
80 | /// } |
81 | |
82 | @mixin border-left-radius($radii) { |
83 | border-bottom-left-radius: $radii; |
84 | border-top-left-radius: $radii; |
85 | } |