-
Notifications
You must be signed in to change notification settings - Fork 2
/
border_radius.scss
28 lines (22 loc) · 1.03 KB
/
border_radius.scss
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
@mixin border-radius($a: false, $b: false, $c: false, $d: false, $top-left: 0, $top-right: 0, $bottom-right: 0, $bottom-left: 0, $top: false, $bottom: false, $right: false, $left: false, $radius: false) {
// Handle shorthand notation like CSS3 would
// You shouldn't explictly set these variables when calling the mixin
@if $d { $radius: $a $b $c $d; }
@else if $c { $radius: $a $b $c; }
@else if $b { $radius: $a $b; }
@else if $a { $radius: $a; }
@else {
// Target individual corners (or groups) instead of using CSS3 shorthand
@if $top { $top-left: $top; $top-right: $top; }
@if $bottom { $bottom-right: $bottom; $bottom-left: $bottom; }
@if $left { $top-left: $left; $bottom-left: $left; }
@if $right { $top-right: $right; $bottom-right: $right; }
// Set the radius
$radius: $top-left $top-right $bottom-right $bottom-left;
}
// Webkit, Mozilla, KHTML and standard CSS3
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-khtml-border-radius: $radius;
border-radius: $radius;
}