You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
49 lines
1.0 KiB
49 lines
1.0 KiB
7 years ago
|
@charset "UTF-8";
|
||
|
|
|
||
|
|
/// Provides a quick method for targeting `border-radius` on both corners on the side of a box.
|
||
|
|
///
|
||
|
|
/// @param {Number} $radii
|
||
|
|
/// List of arguments
|
||
|
|
///
|
||
|
|
/// @example scss - Usage
|
||
|
|
/// .element-one {
|
||
|
|
/// @include border-top-radius(5px);
|
||
|
|
/// }
|
||
|
|
///
|
||
|
|
/// .element-two {
|
||
|
|
/// @include border-left-radius(3px);
|
||
|
|
/// }
|
||
|
|
///
|
||
|
|
/// @example css - CSS Output
|
||
|
|
/// .element-one {
|
||
|
|
/// border-top-left-radius: 5px;
|
||
|
|
/// border-top-right-radius: 5px;
|
||
|
|
/// }
|
||
|
|
///
|
||
|
|
/// .element-two {
|
||
|
|
/// border-bottom-left-radius: 3px;
|
||
|
|
/// border-top-left-radius: 3px;
|
||
|
|
/// }
|
||
|
|
///
|
||
|
|
/// @output `border-radius`
|
||
|
|
|
||
|
|
@mixin border-top-radius($radii) {
|
||
|
|
border-top-left-radius: $radii;
|
||
|
|
border-top-right-radius: $radii;
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin border-right-radius($radii) {
|
||
|
|
border-bottom-right-radius: $radii;
|
||
|
|
border-top-right-radius: $radii;
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin border-bottom-radius($radii) {
|
||
|
|
border-bottom-left-radius: $radii;
|
||
|
|
border-bottom-right-radius: $radii;
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin border-left-radius($radii) {
|
||
|
|
border-bottom-left-radius: $radii;
|
||
|
|
border-top-left-radius: $radii;
|
||
|
|
}
|