_border-radius.scss (1071B)
1 @charset "UTF-8"; 2 3 /// Provides a quick method for targeting `border-radius` on both corners on the side of a box. 4 /// 5 /// @param {Number} $radii 6 /// List of arguments 7 /// 8 /// @example scss - Usage 9 /// .element-one { 10 /// @include border-top-radius(5px); 11 /// } 12 /// 13 /// .element-two { 14 /// @include border-left-radius(3px); 15 /// } 16 /// 17 /// @example css - CSS Output 18 /// .element-one { 19 /// border-top-left-radius: 5px; 20 /// border-top-right-radius: 5px; 21 /// } 22 /// 23 /// .element-two { 24 /// border-bottom-left-radius: 3px; 25 /// border-top-left-radius: 3px; 26 /// } 27 /// 28 /// @output `border-radius` 29 30 @mixin border-top-radius($radii) { 31 border-top-left-radius: $radii; 32 border-top-right-radius: $radii; 33 } 34 35 @mixin border-right-radius($radii) { 36 border-bottom-right-radius: $radii; 37 border-top-right-radius: $radii; 38 } 39 40 @mixin border-bottom-radius($radii) { 41 border-bottom-left-radius: $radii; 42 border-bottom-right-radius: $radii; 43 } 44 45 @mixin border-left-radius($radii) { 46 border-bottom-left-radius: $radii; 47 border-top-left-radius: $radii; 48 }